<template>
  <el-dialog
    :close-on-click-modal="closeModel"
    :title="title"
    :visible.sync="modals"
    class-name="vertical-center-modal"
    footer-hide
    scrollable
    width="50%"
    @on-cancel="cancel"
  >
    <el-table
      ref="selection"
      v-loading="loading"
      :data="childData"
      class="mt14"
      highlight-current-row
      no-filtered-userFrom-text="暂无筛选结果"
      no-userFrom-text="暂无数据"
    >
      <el-table-column label="来源/用途">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="佣金变化">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变化后佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.mark }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--    <el-table-->
    <!--      ref="selection"-->
    <!--      :columns="columns"-->
    <!--      :data="childData"-->
    <!--      :loading="loading"-->
    <!--      border-->
    <!--      highlight-row-->
    <!--      max-height="450"-->
    <!--      no-data-text="暂无数据"-->
    <!--      no-filtered-data-text="暂无筛选结果"-->
    <!--    >-->
    <!--    </el-table>-->
    <vxe-pager
      :current-page="page"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
      :page-size="limit"
      :total="total"
      border
      class="mt20"
      size="medium"
      @page-change="pageChange"
    >
    </vxe-pager>
    <div class="footer acea-row row-right">
      <el-button class="mr" @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { brokerageListApi } from '@api/agent';

export default {
  name: 'agentChildList',
  props: {},
  data() {
    return {
      title: '',
      userRow: {},
      closeModel: false,
      specType: 0,
      batchShow: false,
      batchStock: 0,
      batchPm: 1,
      modals: false,
      loading: false,
      childData: [],
      total: 0,
      page: 1,
      limit: 15,
      columns: [
        {
          title: '代理ID',
          key: 'uid',
          minWidth: 120,
        },
        {
          title: '来源/用途',
          key: 'title',
          minWidth: 120,
        },
        {
          title: '佣金变化',
          key: 'number',
          minWidth: 120,
        },
        {
          title: '变化后佣金',
          key: 'balance',
          minWidth: 120,
        },
        {
          title: '日期',
          key: 'add_time',
          minWidth: 120,
        },
        {
          title: '备注',
          key: 'mark',
          minWidth: 120,
        },
      ],
    };
  },
  methods: {
    userChildBillAttrs(data) {
      console.log('data====>', data);
      this.userRow = data;
      this.title = data.name + ' - ' + data.id + ' - 收益明细';
      brokerageListApi({
        id: data.id,
        page: this.page,
        limit: this.limit,
      })
        .then((res) => {
          this.childData = res.data.list;
          this.total = res.data.count;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    pageChange({ currentPage, pageSize }) {
      this.page = currentPage;
      this.limit = pageSize;
      this.userChildBillAttrs(this.userRow);
    },
    cancel() {
      this.page = 1;
      this.childData = [];
      this.modals = false;
    },
  },
};
</script>

<style lang="stylus" scoped>

/*定义滑块 内阴影+圆角*/
/deep/ ::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #999;
}

/deep/ ::-webkit-scrollbar {
  width: 4px !important; /*对垂直流动条有效*/
}

.footer {
  margin-top 20px;
}

.product-data .image {
  width: 50px !important;
  height: 50px !important;
}

.cards {
  position relative;
}

.batch {
  position absolute;
  right -20px;
  z-index 9;
  top: 18px;
  width: 176px;

  .input {
    width: 176px;
    height: 56px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-left -80px;
  }

  .name {
    font-size 13px;
    color: #1890FF;
    margin-bottom 10px;
    cursor pointer;

    .iconfont {
      font-size 12px;
      margin-left 4px;
    }
  }
}

/deep/ .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
/deep/ .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
  font-size 13px !important;
}

/deep/ .ivu-card-body {
  padding 0 !important;
}

/deep/ .ivu-input:focus {
  border-color #dcdee2 !important;
  box-shadow unset !important;
}

/deep/ .ivu-input:hover {
  border-color #dcdee2 !important;
}

/deep/ .ivu-input {
  border-right 0 !important;
  transition: unset !important;
}

/deep/ .ivu-input-group-append {
  background-color #fff !important;
}

/deep/ .ivu-table {
  overflow unset !important;
}

/deep/ .ivu-table-cell {
  overflow unset !important;
  font-size 13px !important;
}

/deep/ .ivu-table-border:after {
  background-color #fff;
}

/deep/ .ivu-table-header table {
  border-top: 0 !important;
}

/deep/ .ivu-modal-body {
  padding-top 0 !important;
}

.ivu-table-wrapper-with-border {
  border 0 !important;
}

/deep/ .ivu-table-border th, /deep/ .ivu-table-border td {
  border-right 0 !important;
}
</style>
